<template>
  <div class="menus-manage">
    <!-- 面包屑 -->
    <div class="bread-crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/home/prolist' }">项目列表</el-breadcrumb-item>
        <el-breadcrumb-item>添加成员</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="main-middle">
      <el-card class="box-card">
        <!-- 费用信息 -->
        <div class="card-title">添加成员</div>
        <!-- 添加、修改表单 -->
        <el-form ref="staff" :model="staff" label-width="80px">
          <el-row>
            <el-col :span="12">
              <!-- 项目名称 -->
              <el-form-item label="项目名称" prop="proId">
                <el-select style="width:100%" v-model="staff.proId" filterable>
                  <el-option
                    v-for="(item,index) in proList"
                    :key="index"
                    :label="item.proName"
                    :value="item.id"
                    style="width:650px;"
                  ></el-option>
                </el-select>
              </el-form-item>
              <!-- 成员 -->
              <el-form-item label="成员姓名" prop="userId">
                <el-autocomplete
                  v-model="staff.user"
                  :fetch-suggestions="querySearchAsync"
                  placeholder="请输入姓名"
                  @select="selectUserId"
                  style="width:100%;"
                  clearable
                >
                  <template slot-scope="{ item }">
                    <div class="selName">
                      <span>{{ item.compName }} - {{ item.deptName }}</span>
                      <span>{{ item.userName }}</span>
                      <span>[{{ item.userId }}]</span>
                    </div>
                  </template>
                </el-autocomplete>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <!-- 参与日期 -->
              <el-form-item label="参与日期" prop="joinTime">
                <el-date-picker v-model="staff.joinTime" type="date" placeholder="选择日期" style="width:100%;"></el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <!-- 角色 -->
              <el-form-item label="成员角色" prop="roles">
                <el-select v-model="staff.roles" placeholder="请选择" style="width:100%;">
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <!-- 角色成本 -->
              <el-form-item label="成员职责" prop="jobs">
                <el-select v-model="staff.jobs" filterable clearable placeholder="请选择" style="width:100%;">
                  <el-option-group
                    v-for="group in roleList"
                    :key="group.label"
                    :label="group.label">
                    <el-option
                      v-for="item in group.options"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-option-group>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <!-- 离开日期 -->
              <el-form-item label="离开日期" prop="quitTime">
                <el-date-picker v-model="staff.quitTime" type="date" placeholder="选择日期" style="width:100%;"></el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <!-- 人工成本 -->
              <el-form-item label="人工成本" prop="cost">
                <el-input placeholder="请输入金额" v-model="staff.cost" onkeyup="value=value.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1')">
                  <template slot="prepend">￥</template>
                  <template slot="append">元/天</template>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <!-- 报销标准 -->
              <el-form-item label="报销标准" prop="standard">
                <el-input placeholder="请输入金额" v-model="staff.standard" onkeyup="value=value.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1')">
                  <template slot="prepend">￥</template>
                  <template slot="append">元/天</template>
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <div class="card-line">
          <el-button
            type="primary"
            size="small"
            @click="onSubmit"
            :disabled="isSubmit"
          >立即添加</el-button>
          <!-- 返回 -->
          <el-button size="small" style="float:right" @click="goBack">返回</el-button>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
import moment from 'moment';
export default {
  // 当前实例数据
  data () {
    return {
      // 获取所有用户
      usersAll: [],
      // 防止重复提交
      isSubmit: false,
      // 界面默认数据
      staff: {
        user: '',
        roles: [],
        joinTime: '',
        quitTime: '',
        jobs: '',
        cost: 0,
        standard: 0,
        proId: ''
      },

      options: [{
        label: '项目经理',
        value: 'XMJL'
      }, {
        label: '成员',
        value: 'CY'
      }],

      roleList: [{
        label: '总经办',
        options: [{
          value: '总经理',
          label: '总经理'
        }]
      }, {
        label: '销售部',
        options: [{
          value: '销售副总',
          label: '销售副总'
        }, {
          value: '销售总监',
          label: '销售总监'
        }, {
          value: '销售经理',
          label: '销售经理'
        }, {
          value: 'XS-交付经理',
          label: '交付经理'
        }, {
          value: '销售助理',
          label: '销售助理'
        }, {
          value: 'XS-交付助理',
          label: '交付助理'
        }, {
          value: '销售专员',
          label: '销售专员'
        }]
      }, {
        label: '商务部',
        options: [{
          value: '商务经理',
          label: '商务经理'
        }, {
          value: '商务助理',
          label: '商务助理'
        }, {
          value: '商务专员',
          label: '商务专员'
        }]
      }, {
        label: '项目管理办公室',
        options: [{
          value: 'PMO经理',
          label: 'PMO经理'
        }, {
          value: '体系专员',
          label: '体系专员'
        }, {
          value: '技术方案工程师',
          label: '技术方案工程师'
        }, {
          value: '运营专员',
          label: '运营专员'
        }]
      }, {
        label: '项目部',
        options: [{
          value: '项目经理',
          label: '项目经理'
        }, {
          value: '项目助理',
          label: '项目助理'
        }, {
          value: '开发',
          label: '开发'
        }, {
          value: '测试',
          label: '测试'
        }, {
          value: '实施',
          label: '实施'
        }, {
          value: '运维',
          label: '运维'
        }, {
          value: '行政助理',
          label: '行政助理'
        }]
      }, {
        label: '研发部',
        options: [{
          value: '研发副总',
          label: '研发副总'
        }, {
          value: 'YF-业务线负责人',
          label: '业务线负责人'
        }, {
          value: 'YF-项目经理',
          label: '项目经理'
        }, {
          value: 'UI',
          label: 'UI'
        }, {
          value: '测试',
          label: '测试'
        }, {
          value: '测试管理',
          label: '测试管理'
        }, {
          value: '开发',
          label: '开发'
        }, {
          value: '开发管理',
          label: '开发管理'
        }, {
          value: 'SE',
          label: 'SE'
        }, {
          value: '实施',
          label: '实施'
        }, {
          value: '运维',
          label: '运维'
        }]
      }, {
        label: '综合事务部',
        options: [{
          value: '人事经理',
          label: '人事经理'
        }, {
          value: '人事主管',
          label: '人事主管'
        }, {
          value: '招聘主管',
          label: '招聘主管'
        }, {
          value: '人事助理',
          label: '人事助理'
        }, {
          value: '人事专员',
          label: '人事专员'
        }, {
          value: '招聘专员',
          label: '招聘专员'
        }, {
          value: '行政助理',
          label: '行政助理'
        }]
      }, {
        label: '财务部',
        options: [{
          value: '财务主管',
          label: '财务主管'
        }, {
          value: '出纳',
          label: '出纳'
        }, {
          value: '会计',
          label: '会计'
        }]
      }],

      // 表单验证规则
      // staffRules: {
      //   userId: [{ required: true, message: '请输入成员姓名', trigger: 'blur' }],
      //   joinTime: [{ required: true, message: '请输入参与日期', trigger: 'blur' }]
      // },
      // 项目基本信息
      proinfo: {},
      // 所有项目
      proList: []
    };
  },
  mounted () {
    this.restaurants = this.loadAll();
  },
  // 创建实例后执行
  created () {
    // 获取所有项目
    this.getProlist();
    // 获取所有成员
    this.getMembers();
  },

  methods: {
    // 项目费用信息 提交
    onSubmit () {
      let _this = this;
      _this.$nextTick(() => {
        // 判断是否通过验证规则验证
        _this.$refs['staff'].validate(valid => {
          if (valid) {
            let userId = _this.staff.user;
            if (userId.indexOf('[') && userId.indexOf(']')) {
              userId = userId.slice(userId.indexOf('[') + 1, userId.indexOf(']'));
            }
            // 收集请求参数
            let params = {
              proId: _this.staff.proId,
              userId: userId,
              role: _this.staff.roles === 'XMJL' ? '项目经理' : '成员',
              roleCode: _this.staff.roles === 'XMJL' ? 'XMJL' : 'CY',
              joinTime: moment(_this.staff.joinTime).format('YYYY-MM-DD') === 'Invalid date' ? null : moment(_this.staff.joinTime).format('YYYY-MM-DD'),
              quitTime: moment(_this.staff.quitTime).format('YYYY-MM-DD') === 'Invalid date' ? null : moment(_this.staff.quitTime).format('YYYY-MM-DD'),
              standard: _this.staff.standard === 0 ? null : parseInt(_this.staff.standard),
              jobs: _this.staff.jobs,
              cost: _this.staff.cost === 0 ? null : parseInt(_this.staff.cost)
            };
            // 添加用户
            _this.$http.raw('api/insertProMember', params).then(res => {
              let { code } = res;
              // 判断Code状态
              if (code === 0) {
                _this.$message({
                  message: '添加成功！',
                  type: 'success'
                });
                this.goBack();
              }
            }).catch(err => {
              if (err === undefined) {
                _this.$message({
                  message: '服务器响应异常！',
                  type: 'error'
                });
                return false;
              }
            });
          }
        });
      });
    },

    // 返回
    goBack () {
      this.$router.push({
        path: '/home/prolist'
      });
    },
    // 获取所有非转签项目
    getProlist () {
      // 获取所有项目数据
      this.$http.raw('api/findAllPros').then(res => {
        let { code, datas } = res;
        if (code === 0) {
          this.proList = datas;
        }
      }).catch(err => {
        if (err === undefined) {
          this.$message({
            message: '服务器响应异常！',
            type: 'error'
          });
          return false;
        }
      });
    },
    // 获取所有成员
    getMembers () {
      let _this = this;
      let params = {
        status: ''
      };
      _this.$http.post('api/findAllBaseUsers', params).then(res => {
        let { code, datas } = res;
        if (code === 0) {
          for (let i = datas.length; i--;) {
            _this.usersAll.push({
              compName: datas[i].compName,
              deptName: datas[i].deptName,
              userId: datas[i].userId,
              userName: datas[i].userName
            });
          };
        }
      }).catch(err => {
        if (err === undefined) {
          _this.$message({
            message: '服务器响应异常！',
            type: 'error'
          });
          return false;
        }
      });
    },
    // 新增时 选择员工
    selectUserId (item) {
      this.staff.user = item.userName + ' [' + item.userId + ']';
    },
    // 加载全部员工数据
    loadAll () {
      return this.usersAll;
    },
    // 自动检索匹配
    querySearchAsync (queryString, cb) {
      let _this = this;
      let restaurants = _this.restaurants;
      let results = queryString ? restaurants.filter(_this.createStateFilter(queryString)) : restaurants;
      clearTimeout(_this.timeout);
      _this.timeout = setTimeout(() => {
        cb(results);
      }, 300 * Math.random());
    },
    // 查询
    createStateFilter (queryString) {
      return (state) => {
        return (state.userName.indexOf(queryString) === 0);
      };
    }
  }
};
</script>

<style lang="scss" scoped>
@import './index.scss';
</style>
